<template>
	<view class="product-box">
		<u-popup :show="show" mode="right">
		    <view>
				<view style="display: flex;width: 600rpx;height: 800rpx;background-color: aqua;flex-wrap: wrap;justify-content: space-between;">
					<view v-for="(item,index) in firstCategoryList" :key="index" class="category-item" @click="filterProduct(item)">
						<text>{{item.title}}</text>
					</view>
				</view>
				<view class="">
					<button @click="searchProductInfo">查询</button>
				</view>
		    </view>
		</u-popup>
		<view class="">
			<ren-dropdown-filter 
				:filterData='filterData' 
				:defaultIndex='defaultIndex' 
				@onSelected="selectedSort"
				@saleSortEvent="saleSortMethod"></ren-dropdown-filter>
		</view>
		<view class=""  style="position:absolute;top:120rpx">
			<view @click="openDialog">
				筛选
			</view>
		</view>
		<view v-if="notDataFlag" style="position:absolute;top:140rpx">
			没有数据
		</view>
		<view v-else style="position:absolute;top:160rpx">
			<view class="product-item" v-for="(item,index) in productList" :key="index">
				<view class="product-image-box">
					<image :src="`http:${item.image}`"></image>
				</view>
				<view class="product-info-box">
					<view class="title">
						<text>{{item.title}}</text>
					</view>
					<view class="price">
						<text>{{item.price}}</text>
					</view>
					<view class="sales">
						<text>{{item.sales}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				queryObj: {
					kwords: '', //关键字
					param: [], //json格式的值
					page: 1, //当前页
					price1: '', //最低价
					price2: '', //最高价
					otype: 'all', //完成排序功能
					cid: '' //分类
				},
				productList: [], //用来保存商品的列表数据
				total: 0, //用来保存商品总数
				isLoading: false,
				notDataFlag: false,
				filterData: [
					[{
						text: '综合',
						value: 'all'
					},{
						text: '价格从低到高',
						value: 'up'
					}, {
						text: '价格从高到低',
						value: 'down'
					}]
				],
				defaultIndex: [0],
				show:false,
				firstCategoryList:[]
			}
		},
		methods: {
			async getProductList() {
				this.isLoading = true
				const result = await uni.$api.home.searchProductByCodition(this.queryObj)
				this.isLoading = false
				console.log('商品列表', result);
				if (result.data.data == "没有数据") {
					this.notDataFlag = true
				} else {
					//使用ES6的扩展运算的方式进行新旧数组的合并
					this.productList = [...this.productList, ...result.data.data]
					this.total = result.data.pageinfo.total
				}
			},
			async selectedSort(arg){
				console.log('aaa',arg[0][0].value);
				this.queryObj.otype=arg[0][0].value
				const result = await uni.$api.home.searchProductByCodition(this.queryObj)
				this.productList=result.data.data
				this.total = result.data.pageinfo.total
				//this.getProductList()
			},
			async saleSortMethod(){
				this.queryObj.otype="sales"
				const result = await uni.$api.home.searchProductByCodition(this.queryObj)
				this.productList=result.data.data
				this.total = result.data.pageinfo.total
				//this.getProductList()
			},
			openDialog(){
				console.log('((((()))))');
				this.show=true
			},
			async getFirstCategory(){
				const result=await uni.$api.home.getLeftMenusApi()
				this.firstCategoryList=result.data.data
			},
			filterProduct(arg){
				this.queryObj.cid=arg.cid
			},
			async searchProductInfo(){
				console.log('参数',this.queryObj);
				this.show=false
				const result = await uni.$api.home.searchProductByCodition(this.queryObj)
				this.productList=result.data.data
				this.total = result.data.pageinfo.total
			}
		},
		onLoad(options) {
			//将搜索框中的关键字的内容获取到赋值给queryObj对象中kwords
			this.queryObj.kwords = options.keyword
			this.getProductList()
			this.getFirstCategory()
		},
		//上拉触底的生命周期方法
		onReachBottom() {
			if (this.queryObj.page * 10 >= this.total) {
				uni.showToast({
					title: '已经见底了'
				})
			} else {
				if (this.isLoading) return;
				//当前页加1
				this.queryObj.page += 1
				this.getProductList()
			}
		},
		//下拉刷新方法
		onPullDownRefresh() {
			//将page设置为1
			this.queryObj.page = 1
			this.getProductList()
			//关闭pullDownRefersh
			uni.stopPullDownRefresh()
		}
	}
</script>

<style lang="scss">
	.product-box {
		.product-item {
			@include flex-box(start, center, row) .product-image-box {
				image {
					width: 200rpx;
					height: 200rpx;
				}

			}
			.product-info-box {
				.title {}

				.price {}

				.sales {}
			}
		}
	}
	.category-item{
		@include flex-box(center,center,row)
		width: 180rpx;
		height: 64rpx;
		background-color: #ccc;
	}
</style>